<template>
	<view class="login-outer-wrapper" :style="{backgroundImage:'url('+PictureUrl+'bg-register.png)'}">
		<div class="empty3"></div>
		<div class="app-name" :class="{ blur: successTip }">
			<image class="image" :src="PictureUrl+'logo-register.png'" mode="aspectFit"></image>
		</div>
		<div class="login-form" :class="{ blur: successTip }">
			<div class="item-wrapper">
				<image class="icon" src="/static/icon-username-register.png" mode="aspectFit"></image>
				<div class="input-wrapper">
					<input v-model="username" class="input" placeholder-style="color:#999999" type="text"
						placeholder="手机号码" />
				</div>
			</div>
			<div class="item-wrapper">
				<image class="icon" src="/static/icon-password-register.png" mode="aspectFit"></image>
				<div class="input-wrapper" v-if="passwordType === 'type'">
					<input class="input" placeholder-style="color:#999999" type="text" v-model="password"
						placeholder="登录密码" />
				</div>
				<div class="input-wrapper" v-else>
					<input class="input" placeholder-style="color:#999999" type="password" v-model="password"
						placeholder="登录密码" />
				</div>
				<image v-if="passwordType==='type'" @click="passwordType='password'" class="icon"
					src="/static/show-password-register.png" mode="aspectFit"></image>
				<image v-if="passwordType==='password'" @click="passwordType='type'" class="icon"
					src="/static/hide-password-register.png" mode="aspectFit"></image>
			</div>
			<div class="operate-wrapper">
				<div class="item">
					<span class="circle" @click.stop="xieyi = !xieyi" :class="{ check: xieyi }"></span>
					<span>
						<span>同意</span>
						<span style="color: #0052d6;"
							@click="navigateTo('/pages/moduleLogin/article/article?type=yhxy&page=register')">《用户协议》</span>
						<span>和</span>
						<span style="color: #0052d6;"
							@click="navigateTo('/pages/moduleLogin/article/article?type=yszc&page=register')">《隐私政策》</span>
					</span>
				</div>
			</div>
		</div>
		<div class="empty2"></div>
		<div class="submit-wrapepr" :class="{ blur: successTip }">
			<button class="button" :class="{ 'btn-active': isActive }" type="default" @click="register"
				:disabled="btnLoading">
				立即注册
			</button>
		</div>
		<div class="empty1"></div>
		<login-wechat page="register" title="微信注册" :class="{ blur: successTip }"></login-wechat>
		<u-popup :overlayOpacity="0.1" :round="10" mode="center" :show="successTip">
			<view class="success-tip">
				<image class="icon" src="/static/icon-success.png" mode="aspectFit"></image>
				<div class="title">激活成功</div>
				<div class="sub-title">完善信息后可使用更多服务！</div>
				<button class="button" @click="handleClickPerfect">去完善</button>
			</view>
		</u-popup>
		<popup-tip ref="pupuptip" image="none" subTitle="此账号已经被注册,您可以直接登录或更换新的手机号码" confirmText="去登录"
			@popupConfirm="popupConfirm">
		</popup-tip>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	import {
		Register
	} from "@/api/login.js";
	import {
		mobile
	} from "@/utils/RegExp.js";
	import {
		LoginSuccess
	} from "@/utils/filter.js"
	import storage from "@/utils/storage.js";
	import LoginWechat from "@/components/login-wechat.vue";
	import PopupTip from "@/components/popup-tip.vue"
	export default {
		components: {
			LoginWechat,
			PopupTip
		},
		data() {
			return {
				successTip: false,
				passwordType: "password",
				xieyi: false,
				username: "",
				password: "",
				btnLoading: false
			};
		},
		computed: {
			...mapGetters(['PictureUrl']),
			isActive() {
				return this.username.replace(/\s+/g, "") ? true : false
			}
		},
		onShow() {
			let agree = storage.getXyAgree();
			if (agree === true) {
				this.xieyi = true;
				storage.removeXyAgree();
			}
		},
		methods: {
			...mapMutations(["SetUserInfo"]),
			...mapActions(["ActionUserList"]),
			handleClickPerfect() {
				this.navigateTo("/pages/moduleLogin/info/info?back=0&phone=" + this.username);
				this.successTip = false;
			},
			// 注册
			register() {
				let that = this
				if (this.xieyi !== true) {
					uni.$u.toast("请同意《用户协议》和《隐私政策》");
					return;
				}
				if (this.username === "") {
					uni.$u.toast("请输入手机号码");
					return;
				}
				if (mobile.test(this.username) === false) {
					uni.$u.toast("手机号码格式不正确");
					return;
				}
				this.btnLoading = true
				if (this.password === '') {
					uni.$u.toast('请输入密码')
					return
				}
				Register({
					uphone: this.username,
					unionid: 0,
					utype: 1,
					password: this.password,
				}).then((res) => {
					if (res.data.code === 200) {
						let info = res.data.data
						this.ActionUserList({
							type: "login",
							...info
						})
					} else {
						this.$refs.pupuptip.tipshow = true
					}
					this.btnLoading = false
				}).catch(err => {
					this.btnLoading = false
				})
			},
			popupConfirm() {
				uni.redirectTo({
					url: "/pages/moduleLogin/login/login",
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			}
		},
	};
</script>

<style lang="scss">
	@import "@/utils/variable.scss";

	.success-tip {
		padding: 48upx;
		text-align: center;

		.icon {
			width: 80upx;
			vertical-align: middle;
		}

		.title {
			margin-top: 8upx;
			font-size: 34upx;
		}

		.sub-title {
			margin-top: 24upx;
			font-size: 26upx;
			color: rgba(102, 102, 102, 1);
		}

		.button {
			margin-top: 48upx;
			width: 160upx;
			height: 60upx;
			line-height: 60upx;
			background: linear-gradient(-36deg,
					rgba(114, 215, 204, 0.8),
					rgba(40, 207, 179, 0.8));
			border-radius: 4upx;
			color: #ffffff;
			font-size: 26upx;
			border-radius: 8upx;
		}
	}

	.login-outer-wrapper {
		height: 100vh;
		background-size: cover;
		background-position: center;
		padding: 0 50upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.blur {
			filter: blur(6upx);
		}

		.empty3 {
			flex: 3;
		}

		.empty2 {
			flex: 2;
		}

		.empty1 {
			flex: 1;
		}

		.app-name {
			text-align: center;
			font-size: 50upx;
			color: #ffffff;
			font-weight: bold;
			margin-bottom: 120upx;

			.image {
				width: 300upx;
				height: 300upx;
			}
		}

		.login-form {
			.item-wrapper {
				border: 2upx solid rgb(0, 144, 132);
				border-radius: 80upx;
				height: 80upx;
				display: flex;
				align-items: center;
				background-color: #ffffff64;
				border-radius: 80upx;
				margin-bottom: 40upx;

				.icon {
					width: 40upx;
					height: 40upx;
					margin: 0 32upx;
					padding: 12upx;
				}

				.input-wrapper {
					flex: 1;
					border-left: 1upx solid #ffffff86;

					.input {
						color: rgba(20, 104, 92, 1);
					}
				}
			}

			.operate-wrapper {
				display: flex;
				justify-content: space-between;

				.item {
					color: rgba(0, 144, 132, 0.82);
					display: flex;
					align-items: center;
					height: 40upx;
					line-height: 40upx;

					.circle {
						width: 28upx;
						height: 28upx;
						border: 2upx solid rgba(0, 144, 132, 0.82);
						box-sizing: border-box;
						border-radius: 28upx;
						margin-right: 8upx;

						&.check {
							background-color: rgba(0, 144, 132, 0.82);
							color: #ffffff;
							position: relative;

							&::after {
								content: "√";
								font-size: 24upx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}
			}
		}

		.submit-wrapepr {
			.button {
				color: #ffffff;
				background: linear-gradient(to left, #72d7cc96, #28cfb396);
				box-shadow: 0 0 15upx 8upx #81d8cf70;
				letter-spacing: 16upx;

				&:after {
					border: 2upx #6adab7;
				}
			}

			.btn-active {
				background: linear-gradient(-36deg,
						rgba(114, 215, 204, 0.6),
						rgba(40, 207, 179, 0.6));
				color: #fff;
			}
		}
	}
</style>
